<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css"/>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body{ font-size: 13px;}
        .frame{width:276px;border:solid 1px #ccc;display:none;}
        .frame .title{font-weight:bold;width:260px;padding:8px;background-color:#eee;}
        .frame .content{padding:15px 8px;}
    </style>
    <script type="text/javascript">
        $(function(){
            jQuery.fn.center=function(){
                this.css("position","absolute");
                this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px");
                this.css("left",($(window).width()-this.width()/2+$(window).scrollLeft()+"px"));
                return this;
            };
            $(".frame").center().show(1000);
            $(".title").find("img").bind("click",function(){
                $(".frame").hide(1000);
            });
        });
    </script>
    <title>centeShow</title>
</head>
<body>
<div class="frame">
    <div class="title fl">
        <div class="fl">
            主题
        </div>
        <div class="fr">
            <img src="#"/>
        </div>
    </div>
    <div class="content cls">
        内容
    </div>
</div>
</body>
</html>